<!-- 后勤订单 -->
<template>
  <div>
    <template v-if="detail.HotelEntryCount || detail.ReceptionEntryCount || detail.CateringEntryCount">
      <div v-if="detail.HotelEntryCount" class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">酒店费用</span>
        </el-divider>
        <el-table class="table" :data="detail.HotelEntryCount.HotelEntrys" size="mini">
          <el-table-column type="index" label="序号" :width="50" align="center" />
          <el-table-column prop="HotelName" label="酒店名称" />
          <el-table-column prop="RoomName" label="房型名称" />
          <el-table-column prop="ReserveNumber" label="预定间数" :width="80" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.ReserveNumber }}间</span>
            </template>
          </el-table-column>
          <el-table-column label="入住时间" :width="90" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.CheckInDate | FormatDate('yyyy-MM-dd') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="离店时间" :width="90" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.CheckOutDate | FormatDate('yyyy-MM-dd') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="DayNum" label="天数" :width="80" align="center">
            <template slot-scope="{ row }">
              <span>共{{ row.DayNum }}晚</span>
            </template>
          </el-table-column>
          <el-table-column prop="ReceptionName" label="预定人姓名" :min-width="120" />
          <el-table-column prop="ReceptionPhoneNumber" label="预订人手机号" :width="100" />
          <el-table-column prop="ExtraBedNumber" label="加床数量" :width="70" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.ExtraBedNumber || '- -' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Amount" label="价格">
            <template slot-scope="{ row }">
              <span>￥{{ formatMoney(row.Amount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Remark" label="备注" :width="100">
            <template slot-scope="{ row }">
              <p>{{ row.Remark || '- -' }}</p>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
          <el-col :span="6" align="right">
            <span>共计：{{ detail.HotelEntryCount.Count }} 项</span>
          </el-col>
          <el-col :span="6" align="right" class="gl_pr_20">
            <span>合计：<span>{{ formatMoney(detail.HotelEntryCount.Amount) }}</span> 元</span>
          </el-col>
        </el-row>
      </div>
      <div v-if="detail.ReceptionEntryCount" class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">接待费用</span>
        </el-divider>
        <el-table class="table" :data="detail.ReceptionEntryCount.ReceptionEntrys" size="mini">
          <el-table-column type="index" label="序号" :width="50" align="center" />
          <el-table-column label="接送地点" :min-width="160">
            <template slot-scope="{ row }">
              <span>{{ row.DepartureStation }}</span>
              <span> -- </span>
              <span>{{ row.ArrivalStation }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CarType" label="车辆类型" />
          <el-table-column prop="CarSeatCode" label="座位数">
            <template slot-scope="{ row }">
              <span v-if="row.CarSeatCode">
                <template v-for="ktem in dict.carSeatType">
                  {{ ktem.code === row.CarSeatCode ? ktem.value: '' }}
                </template>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="CarColor" label="颜色" :width="70" align="center" />
          <el-table-column prop="TrainNumber" label="车次">
            <template slot-scope="{ row }">
              <span>{{ row.TrainNumber || '- -' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ReceptionName" label="预定人姓名" :min-width="120" />
          <el-table-column prop="ReceptionPhoneNumber" label="预定人手机号" :width="100" />
          <el-table-column prop="PickUpCarTime" label="接车时间" :width="140" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.PickUpCarTime == '0001-01-01T00:00:00' || row.PickUpCarTime == null">- -</span>
              <span v-else>{{ row.PickUpCarTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="PickUpCarNumber" label="接车车辆数量" :width="100" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.PickUpCarNumber || '- -' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="DeliverCarTime" label="送车时间" :width="140" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.DeliverCarTime == '0001-01-01T00:00:00' || row.DeliverCarTime == null">- -</span>
              <span v-else>{{ row.DeliverCarTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="DeliverCarNumber" label="送车车辆数量" :width="100" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.DeliverCarNumber || '- -' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Amount" label="价格">
            <template slot-scope="{ row }">
              <span>￥{{ formatMoney(row.Amount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Remark" label="备注" :width="100">
            <template slot-scope="{ row }">
              <p>{{ row.Remark || '- -' }}</p>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
          <el-col :span="6" align="right">
            <span>共计：{{ detail.ReceptionEntryCount.Count }} 项</span>
          </el-col>
          <el-col :span="6" align="right" class="gl_pr_20">
            <span>合计：<span>{{ formatMoney(detail.ReceptionEntryCount.Amount) }}</span> 元</span>
          </el-col>
        </el-row>
      </div>
      <div v-if="detail.CateringEntryCount" class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">就餐费用</span>
        </el-divider>
        <el-table class="table" :data="detail.CateringEntryCount.CateringEntrys" size="mini">
          <el-table-column type="index" label="序号" :width="50" align="center" />
          <el-table-column prop="RestaurantName" label="饭店名称" />
          <el-table-column prop="FoodName" label="食品名称" />
          <el-table-column prop="FoodTypeName" label="餐别" :width="70" align="center" />
          <el-table-column label="配送时间" :width="120" align="center">
            <template slot-scope="{ row }">
              <p>{{ 10 > row.DeliveryStartHour ? '0' + row.DeliveryStartHour : row.DeliveryStartHour }}:{{ 10 > row.DeliveryStartMinute ? '0' + row.DeliveryStartMinute : row.DeliveryStartMinute }} - {{ 10> row.DeliveryEndHour ? '0' + row.DeliveryEndHour : row.DeliveryEndHour }}:{{ 10 > row.DeliveryEndMinute ? '0' + row.DeliveryEndMinute : row.DeliveryEndMinute }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="DeliveryAddress" label="配送地址" :width="160" />
          <el-table-column prop="ReceptionName" label="预定人姓名" :min-width="120" />
          <el-table-column prop="ReceptionPhoneNumber" label="预订人手机号" :width="100" />
          <el-table-column prop="ReserveNumber" label="预订份数" :width="70" align="center" />
          <el-table-column label="开始/结束订餐日期" :width="160">
            <template slot-scope="{ row }">
              <span>{{ row.ReserveStartDate | FormatDate('yyyy-MM-dd') }}至{{ row.ReserveEndDate | FormatDate('yyyy-MM-dd') }}</span>
              <span> 共{{ row.DayNum }}天</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="价格">
            <template slot-scope="{ row }">
              <span>￥{{ (row.Amount / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Remark" label="备注" :width="100">
            <template slot-scope="{ row }">
              <p>{{ row.Remark || '- -' }}</p>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
          <el-col :span="6" align="right">
            <span>共计：{{ detail.CateringEntryCount.Count }} 项</span>
          </el-col>
          <el-col :span="6" align="right" class="gl_pr_20">
            <span>合计：<span>{{ formatMoney(detail.CateringEntryCount.Amount) }}</span> 元</span>
          </el-col>
        </el-row>
      </div>
    </template>
    <el-divider />
    <template v-if="detail.HotelEntryCount || detail.ReceptionEntryCount || detail.CateringEntryCount">
      <el-row class="summary_wrap" type="flex" justify="end">
        <el-col :span="4">
          <ul class="summary_list">
            <li v-if="detail.HotelAmount" class="summary_item gl_clear">
              <span class="gl_fl">酒店费用</span>
              <span class="gl_fr">{{ formatMoney(detail.HotelAmount) }} 元</span>
            </li>
            <li v-if="detail.ReceptionAmount" class="summary_item gl_clear">
              <span class="gl_fl">接待费用</span>
              <span class="gl_fr">{{ formatMoney(detail.ReceptionAmount) }} 元</span>
            </li>
            <li v-if="detail.CateringAmount" class="summary_item gl_clear">
              <span class="gl_fl">就餐费用</span>
              <span class="gl_fr">{{ formatMoney(detail.CateringAmount) }} 元</span>
            </li>
            <el-divider />
            <li class="summary_item summary_total gl_clear">
              <span class="gl_fl">合计</span>
              <span class="gl_fr money_color">{{ formatMoney(detail.Amount) }} 元</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'LogisticsOrder',
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>

<style scoped>
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.money_color {
  color: #f56c6c;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: auto;
}
.summary_item {
  font-size: 14px;
  color: #353434;
  line-height: 24px;
}
</style>
